/* 主题变量 */
:root {
  /* 默认亮色主题 */
  --primary-color: #4a90e2;
  --secondary-color: #67c23a;
  --background-color: #ffffff;
  --surface-color: #f5f7fa;
  --text-primary: #2c3e50;
  --text-secondary: #606266;
  --border-color: #dcdfe6;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --hover-color: #ecf5ff;
}

/* 深色主题 */
[data-theme="dark"] {
  --primary-color: #409eff;
  --secondary-color: #85ce61;
  --background-color: #1a1a1a;
  --surface-color: #2c2c2c;
  --text-primary: #ffffff;
  --text-secondary: #909399;
  --border-color: #4c4c4c;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --hover-color: #363636;
}

/* 蓝色主题 */
[data-theme="blue"] {
  --primary-color: #1976d2;
  --secondary-color: #64b5f6;
  --background-color: #f5f9ff;
  --surface-color: #ffffff;
  --text-primary: #1a237e;
  --text-secondary: #3949ab;
  --border-color: #bbdefb;
  --shadow-color: rgba(25, 118, 210, 0.1);
  --hover-color: #e3f2fd;
}

/* 绿色主题 */
[data-theme="green"] {
  --primary-color: #2e7d32;
  --secondary-color: #66bb6a;
  --background-color: #f5fbf5;
  --surface-color: #ffffff;
  --text-primary: #1b5e20;
  --text-secondary: #388e3c;
  --border-color: #c8e6c9;
  --shadow-color: rgba(46, 125, 50, 0.1);
  --hover-color: #e8f5e9;
}

/* 紫色主题 */
[data-theme="purple"] {
  --primary-color: #7b1fa2;
  --secondary-color: #ba68c8;
  --background-color: #f9f5ff;
  --surface-color: #ffffff;
  --text-primary: #4a148c;
  --text-secondary: #6a1b9a;
  --border-color: #e1bee7;
  --shadow-color: rgba(123, 31, 162, 0.1);
  --hover-color: #f3e5f5;
}

/* 应用主题变量的通用样式 */
body {
  background-color: var(--background-color);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

.container {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 12px var(--shadow-color);
}

.nav-tab {
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
}

.nav-tab:hover {
  background-color: var(--hover-color);
}

.nav-tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  transition: opacity 0.3s;
}

button:hover {
  opacity: 0.9;
}

input, select {
  background-color: var(--surface-color);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.progress-bar {
  background-color: var(--secondary-color);
}

.image-grid {
  background-color: var(--surface-color);
}

.image-item {
  border: 1px solid var(--border-color);
  background-color: var(--surface-color);
}

.image-item:hover {
  box-shadow: 0 2px 12px var(--shadow-color);
}

/* 主题切换按钮样式 */
.theme-switcher {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
  padding: 8px;
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: 0 2px 8px var(--shadow-color);
}

.theme-option {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.theme-option.active {
  border-color: var(--primary-color);
  transform: scale(1.1);
}

.theme-option[data-theme="light"] {
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
}

.theme-option[data-theme="dark"] {
  background-color: #1a1a1a;
}

.theme-option[data-theme="blue"] {
  background-color: #1976d2;
}

.theme-option[data-theme="green"] {
  background-color: #2e7d32;
}

.theme-option[data-theme="purple"] {
  background-color: #7b1fa2;
}
